import React ,{useState,useRef}from "react";
import { PageContainer } from "@ant-design/pro-layout";
import ProTable from "@ant-design/pro-table";
import { Button,message,Modal } from "antd";
import { queryApi,updateApi,removeApi,addApi  } from "@/services/ant-design-pro/apis";
import CreateApi from "./component/CreateApi";
import UpdateApi from "./component/UpdateApi";

const ApiDetails = (props) => {
     
    const actionRef = useRef();
    const [selRows,setSelRows]=useState();
    const [createModalVisible,handleModalVisible]=useState(false);
    const [updateModalVisible,handleUpdteModalVisible]=useState(false);
    const [stepFormVals,setStepFormVals]= useState();
    const [exportModalVisible, handleExportModalVisible] = useState(false);
    const param={};
    
    const handleDel = async (record) => {
        Modal.confirm({
            title: '删除配置',
            content: '确认删除配置？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
                const hide = message.loading('正在删除');
               try{
                await removeApi({ id: record.id })
                hide();
                message.success('删除成功');
                actionRef.current.reload();
               }catch(error){
                hide();
                message.error('删除失败请重试！');
                return false;
               }
            }
        })
    }

    const handleAdd = async (value) =>{
        const hide = message.loading("正在添加");
        try{
           
            await addApi({...value})
            hide();
            handleModalVisible(false);
            message.success("添加成功");
            actionRef.current.reload();
            return true;
        }catch(error){
            hide();
            message.error("添加失败")
            return false;
        }
    }

    const handleUpdate = async (value) =>{
        const hide = message.loading("正在配置");
        try{
            await updateApi({...value})
            hide();
            handleUpdteModalVisible(false);
            setStepFormVals(undefined);
            message.success("配置成功");
            actionRef.current.reload();
        }catch(error){
            hide();
            message.error("配置失败")
        }
    }


    const columns=[
        {
            title:'id',
            dataIndex:'id',
            hideInSearch:true,
        },
        {
            title:'api名称',
            dataIndex:'apiName'
        },
        {
            title:'配置信息',
            dataIndex:'apiInfo',
            valueType:'textarea',
            hideInSearch:true,
            hideInTable:true,
            formItemProps:{
                rules:[
                    {
                        required:true,
                        message:"配置信息是必须项"
                    }
                ]
            }
        },
        {
            title:'反射类名',
            dataIndex:'reflectionClass',
            hideInSearch:true,
        },
        {
            title: '创建时间',
            dataIndex: 'creationTime',
            valueType: 'dateTime',
            hideInSearch:true,
        },
        {
            title:'修改时间',
            dataIndex: 'changeTime',
            valueType: 'dateTime',
            hideInSearch:true,
        },
        {
            title:'备注',
            dataIndex:'remark',
            hideInSearch:true,
        },
        {
            title:'操作',
            dataIndex:'option',
            valueType:'option',
            render:(_,record)=>[
                <a key="edit" onClick={()=>{
                    setStepFormVals(record);
                    handleUpdteModalVisible(true);
                }}>配置</a>,
                <a key="delete" onClick={()=>{
                    handleDel(record);
                }}>删除</a>,
            ]
        }
    ]

    return (
        <PageContainer>
            <ProTable
               columns={columns}
               actionRef={actionRef}
               params={param}
               headerTitle='api配置列表'
               rowKey='id'
               request={queryApi}
               rowSelection={{
                   onChange:(_,selRows)=>{
                       setSelRows(selRows)
                   }
               }}
               toolBarRender={()=>[
                <Button type="primary" onClick={()=>{
                    handleModalVisible(true)
                }}>新建</Button>
            ]}
               search={{
                defaultCollapsed: false
              }}
            >              
            </ProTable>
            <CreateApi
              createModalVisible={createModalVisible}
              handleModalVisible={()=>{handleModalVisible(false)}}
              handCreate={()=>{}}
              onSubmit={async (values) => {
                await handleAdd(values)
              }}
             
              onCancel={()=>{
                handleModalVisible(false)
              }}
            >
                {/* <ProTable
                  type="form"
                  columns={columns}
                  form={{initialValues:{productStatus:"99",productType:"1",receiveType:"1"}}}
                  onSubmit={async (values)=>{
                       await handleAdd(values)
                  }}
                >
                </ProTable> */}
            </CreateApi>

            {stepFormVals && Object.keys(stepFormVals).length?(
            <UpdateApi
              updateModalVisible={updateModalVisible}
              handleModalVisible={()=>{
                  handleUpdteModalVisible(false)
                  setStepFormVals(undefined)
              }}
              onSubmit={async (values)=>{
                await handleUpdate({...values,id:stepFormVals.id})
              }}

              onCancel={()=>{
                handleUpdteModalVisible(false)
                setStepFormVals(undefined)
              }}
              values={stepFormVals}
            >
                {/* <ProTable
                  type="form"
                  columns={columns}
                  form={{initialValues:{
                      ...stepFormVals,
                      productStatus:stepFormVals.productStatus?stepFormVals.productStatus+"":null,
                      productType:stepFormVals.productType?stepFormVals.productType+"":null,
                      receiveType:stepFormVals.receiveType?stepFormVals.receiveType+"":null
                    }}}
                  onSubmit={async (values)=>{
                    await handleUpdate({...values,id:stepFormVals.id})
                  }}
                >
                </ProTable> */}
            </UpdateApi>
            ):null}

        </PageContainer>
    )
}

export default  ApiDetails;

